<template>
  <div class="detail_page" v-if="showDetail">
    <div class="left_con" v-if="!hideLeft">
      <div class="top_title">
        <a-breadcrumb separator=">" class="breadcrumb">
          <a-breadcrumb-item @click="$router.push({ name: 'PaintModel' })">
            <a class="pointer">首页</a>
          </a-breadcrumb-item>
          <a-breadcrumb-item @click="$router.push({ name: 'Classify' })">
            <a class="pointer">分类页</a>
          </a-breadcrumb-item>
          <a-breadcrumb-item>
            <a class="pointer">详情页</a>
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="search_con">
        <a-input-search
          v-model:value="pageInfo.title"
          placeholder="请输入搜索内容"
          style="width: 100%; padding: 4px 15px"
          @search="searchThis"
        />
      </div>

      <div class="tab_con">
        <div
          class="tab_item"
          @click="tabChange(index)"
          :class="imageTabIndex == index ? 'active' : ''"
          v-for="(item, index) in tabList"
          :key="index"
        >
          {{ item.tab_name }}
        </div>
      </div>

      <div
        class="tab_main"
        v-if="modelList.length > 0"
        @scroll="handleScrollChange"
      >
        <template v-for="item in modelList" :key="item.id">
          <!-- 适配webp -->
          <div
            v-if="item.images && item.images[0] && item.images[0].webp"
            class="image_item"
            @click="makeSame(item)"
            :style="{ backgroundImage: 'url(' + item.images[0].webp + ')' }"
          >
            <div class="operate_image">
              <div class="image_title">
                <a-tooltip placement="topLeft">
                  <template #title>{{ item.title }}</template>
                  {{ item.title }}
                </a-tooltip>
              </div>

              <div
                shape="circle"
                class="download_this"
                size="small"
                danger
                @click.stop="downloadThis(item)"
              >
                <VerticalAlignBottomOutlined v-if="!downloadIng" />
                <LoadingOutlined v-else />
              </div>

              <div
                v-if="imageTabIndex == 0"
                @click.stop="collectClick(item)"
                shape="circle"
                class="my_collect"
                size="small"
                danger
              >
                <HeartFilled
                  v-if="item.collect && $store.getters.isLogin"
                  style="color: red"
                />
                <HeartOutlined v-else />
              </div>

              <div
                v-if="imageTabIndex == 1 || imageTabIndex == 2"
                shape="circle"
                class="delete_collect"
                type="default"
                size="small"
                danger
                @click.stop="deleteCollect(item)"
              >
                <DeleteOutlined />
              </div>
              <a-button
                class="make_same"
                size="small"
                type="primary"
                @click.stop="makeSame(item)"
                >创作
              </a-button>
            </div>
          </div>

          <div
            v-else-if="item.images && item.images[0] && item.images[0].uri"
            class="image_item"
            @click="makeSame(item)"
            :style="{ backgroundImage: 'url(' + item.images[0].uri + ')' }"
          >
            <div class="operate_image">
              <div class="image_title">
                <a-tooltip placement="topLeft">
                  <template #title>{{ item.title }}</template>
                  {{ item.title }}
                </a-tooltip>
              </div>

              <div
                shape="circle"
                class="download_this"
                size="small"
                danger
                @click.stop="downloadThis(item)"
              >
                <VerticalAlignBottomOutlined v-if="!downloadIng" />
                <LoadingOutlined v-else />
              </div>

              <div
                v-if="imageTabIndex == 0"
                @click.stop="collectClick(item)"
                shape="circle"
                class="my_collect"
                size="small"
                danger
              >
                <HeartFilled
                  v-if="item.collect && $store.getters.isLogin"
                  style="color: red"
                />
                <HeartOutlined v-else />
              </div>

              <div
                v-if="imageTabIndex == 1 || imageTabIndex == 2"
                shape="circle"
                class="delete_collect"
                type="default"
                size="small"
                danger
                @click.stop="deleteCollect(item)"
              >
                <DeleteOutlined />
              </div>
              <a-button
                class="make_same"
                size="small"
                type="primary"
                @click.stop="makeSame(item)"
                >创作
              </a-button>
            </div>
          </div>
          <div
            v-else-if="item.images && item.images.length == 0"
            class="image_item relative"
          >
            <div class="image_item_img">{{ judgeStatus(item.status) }}</div>
            <div class="operate_image-cover">
              <div
                shape="circle"
                class="delete_collect"
                type="default"
                size="small"
                danger
                @click.stop="deleteCollect(item)"
              >
                <DeleteOutlined />
              </div>
            </div>
          </div>
        </template>
        <template v-if="noMore">
          <div class="no_data" style="margin-top: 30px">--暂无更多数据--</div>
        </template>

        <template v-if="modelLoading">
          <span
            style="
              margin-top: 5px;
              width: 100%;
              text-align: center;
              margin: 10px 0;
              color: #999999;
            "
            >数据加载中...</span
          >
        </template>
      </div>

      <div class="tab_main" v-if="modelList.length == 0 && !modelLoading">
        <div class="no_data">暂无数据</div>
      </div>

      <div
        class="tab_main"
        v-if="modelList.length == 0 && modelLoading && pageInfo.page == 1"
      >
        <div class="model_loading">
          <LoadingOutlined style="font-size: 16px" />
          <span style="margin-top: 5px">数据加载中...</span>
        </div>
      </div>
    </div>

    <div class="middle_con" v-if="!imageLoading" :style="middleConStyle">
      <div class="middle_top" :style="middleTopStyle">
        <div
          class="main_image"
          v-if="
            (outputImages[currentOutIndex] ||
              (caseInfo.images && caseInfo.images[0].origin_uri)) &&
            caseInfo.id
          "
        >
          <img
            v-if="currentTab == 'sd'"
            :style="{
              width:
                hideLeft && fitWidth && outputImages.length == 0
                  ? '65%'
                  : hideLeft && fitWidth && outputImages.length > 0
                  ? '60%'
                  : !hideLeft && fitWidth && outputImages.length == 0
                  ? '76%'
                  : !hideLeft && fitWidth && outputImages.length > 0
                  ? '73%'
                  : 'auto',
              height: ' 100%',
              objectFit: 'cover',
            }"
            :src="imgObj"
            alt="图片加载中..."
          />

          <a-carousel
            v-else
            arrows
            :key="carouselKey"
            style="width: 60%; height: 100%"
            :after-change="onChange"
          >
            <a-image
            class="carousel-item-img"
              :class="
                caseInfo.aspect_ratio == '9:16' ||
                caseInfo.aspect_ratio == '16:9'
                  ? 'carousel-objectFit'
                  : ''
              "
              :src="img.url"
              :key="aIndex"
              v-for="(img, aIndex) in caseInfo.third_image"
            />
            <template #prevArrow>
              <div class="custom-slick-arrow" style="left: 10px; zindex: 1">
                <left-circle-outlined />
              </div>
            </template>
            <template #nextArrow>
              <div class="custom-slick-arrow" style="right: 10px">
                <RightCircleOutlined />
              </div>
            </template>
          </a-carousel>
          <div class="right_operate" v-if="caseInfo.id">
            <div class="download_image">
              <VerticalAlignBottomOutlined
                v-if="!downloadIng"
                @click.stop="
                  downloadThis({
                    id: caseInfo.id,
                    images:
                      outputImages.length > 0 ? outputImages : caseInfo.images,
                  })
                "
              />
              <LoadingOutlined v-else />
            </div>
            <div class="collect_image" @click.stop="collectSingleClick()">
              <HeartFilled
                v-if="caseInfo.collect && $store.getters.isLogin"
                style="color: red"
              />

              <HeartOutlined v-else />
            </div>
          </div>
        </div>

        <div class="main_image" v-else>
          <div class="image_container">
            <img
              :src="defaultImg"
              alt=""
            />
            <div class="title">生成的图片将会显示在这里</div>
            <div class="desc">请在右侧输入创意，生成你的作品吧</div>
          </div>
        </div>
      </div>
      <!-- <a-spin :spinning="tLoading"> 
       <div v-if="caseInfo.platform&&caseInfo.platform.api=='midjourney'" class="page-wrapper">
    
        <div class="page-list">
         
          <a-button class="page-item" @click="pageChange(tIndex)" :class="currentPage==tIndex?'active-page':''" v-for="(tImg,tIndex) in 5" :key="tIndex">
                {{ tIndex==0?'原图':tIndex}}
              </a-button>
        </div>
     
        </div>
      </a-spin> -->

      <a-spin
        :spinning="tLoading"
        v-if="caseInfo.platform && caseInfo.platform.api == 'midjourney'"
      >
        <div class="operation">
          <div class="magnify">
            <div class="color-purple">放大：</div>
            <a-button @click="biggerImage(1)">左上</a-button>
            <a-button @click="biggerImage(2)">右上</a-button>
            <a-button @click="biggerImage(3)">左下</a-button>
            <a-button @click="biggerImage(4)">右下</a-button>
          </div>
          <div class="trimming mt-10">
            <div class="color-purple">微调：</div>
            <a-button @click="adjustImage(1)">左上</a-button>
            <a-button @click="adjustImage(2)">右上</a-button>
            <a-button @click="adjustImage(3)">左下</a-button>
            <a-button @click="adjustImage(4)">右下</a-button>
          </div>
        </div>
      </a-spin>

      <!-- <div class="middle_bottom" v-if="outputImages.length > 0">
        <div
          class="image_item"
          @click="currentOutIndex = index"
          v-for="(item, index) in outputImages"
          :key="index"
          :style="{ backgroundImage: 'url(' + item + ')' }"
        >
          <div v-if="index == currentOutIndex" class="choose_image">
            <CheckOutlined style="margin-left: 3px; margin-bottom: 3px" />
          </div>
        </div>
      </div> -->
    </div>

    <div
      class="middle_con"
      :style="middleConStyle"
      style="display: flex; align-items: center; justify-content: center"
      v-else
    >
      <div class="loading_txt">
        <span style="z-index: 9; position: absolute; width: 120px; left: 0"
          >数据请求中...</span
        >
      </div>
    </div>

    <div class="right_con" :style="rightConStyle">
      <div class="loading_view" v-if="paramsLoading">
        <LoadingOutlined />
        <span style="margin-top: 7px">数据加载中...</span>
      </div>

      <div class="loading_view" v-if="noParamsList">暂无数据</div>

      <div class="right_top" v-if="!noParamsList">
        <div class="tab-list">
          <div
            class="tab-sd"
            @click="modeTabChange('sd')"
            :class="currentTab == 'sd' ? 'active-tab' : ''"
          >
            SD模型
          </div>
          <div
            class="tab-mj"
            @click="modeTabChange('mj')"
            :class="currentTab == 'mj' ? 'active-tab' : ''"
          >
            MJ模型
          </div>
        </div>
        <!-- 默认参数 -->
        <div class="normal_params_con" v-if="normalParams.length > 0">
          <!-- 选择风格 -->

          <choosePaintStyle
            v-if="styleModelList.length > 0"
            :styleModelList="styleModelList"
            :styleIndex="styleIndex"
            :expandStyle="expandStyle"
            @chooseStyle="chooseStyle"
            @changeStatus="expandStyle = !expandStyle"
          />
          <div
            class="form_item"
            v-for="(item, index) in normalParams"
            :key="index"
          >
            <div class="form_title">
              <div class="left_title">
                <span
                  v-if="item.is_required"
                  style="color: red; margin-right: 3px"
                  >*</span
                >{{ item.input_name }}
              </div>
              <a-tooltip placement="left">
                <template #title>
                  {{ item.param_intro }}
                </template>
                <QuestionCircleOutlined v-if="item.param_intro" />
              </a-tooltip>
            </div>

            <div
              class="form_value"
              style="position: relative"
              v-if="
                item.param_name == 'prompt' ||
                item.param_name == 'prompts' ||
                item.param_name == 'negative_prompt'
              "
            >
              <!-- 普通文本框 -->
              <div class="text_area_con">
                <a-textarea
                  style="
                    border: none;
                    background-color: #f6f7f9;
                    border-radius: 10px;
                  "
                  @change="(value) => inputChange(value, item.param_name)"
                  :auto-size="{
                    minRows:
                      item.param_name == 'prompt' ||
                      item.param_name == 'prompts'
                        ? 5
                        : 4,
                    maxRows:
                      item.param_name == 'prompt' ||
                      item.param_name == 'prompts'
                        ? 5
                        : 4,
                  }"
                  v-model:value="normalParams[index].param_varlue"
                  :placeholder="
                    item.param_name == 'prompt' || item.param_name == 'prompts'
                      ? '在此输入您的创意，每个提示词用逗号分开，如：一个女孩，绿色头发，校园'
                      : '请输入'
                  "
                />

                <div
                  v-if="
                    item.param_name == 'prompt' || item.param_name == 'prompts'
                  "
                  class="textarea_bottom"
                >
                  <a-button
                    v-if="currentTab == 'sd'"
                    type="link"
                    style="padding: 0; margin: 0"
                    @click="vocabularyVisible = true"
                    >推荐词</a-button
                  >
                  <a-button
                    v-else
                    :loading="btnLoading"
                    :disabled="!normalParams[index].param_varlue"
                    type="link"
                    style="padding: 0; margin: 0"
                    @click="getPrompts(normalParams[index])"
                    >提示词生成</a-button
                  >
                  <a style="color: #999" @click="clearPrompt">清空</a>
                </div>
              </div>
              <template v-if="currentTab == 'sd'">
                <div
                  class="bottom_tips"
                  v-if="
                    item.param_name == 'prompt' || item.param_name == 'prompts'
                  "
                >
                  <div style="display: flex; align-items: center">
                    <span style="font-size: 12px">示范:</span>
                    <span class="prompt_title" v-if="promptTitle.length > 0">
                      <a
                        class="a_link"
                        @click="chooseRecommad(prom_item)"
                        v-for="(prom_item, prom_index) in promptTitle"
                        :key="prom_index"
                        >{{ prom_item.title }}</a
                      >
                    </span>
                  </div>
                  <RedoOutlined
                    class="refrash_icon"
                    @click="getPromptList"
                    :class="loadPrompt ? 'prompt_loading' : ''"
                  />
                </div>
              </template>
            </div>

            <div
              class="form_value"
              v-if="
                item.input_type == 'text' &&
                item.param_name != 'prompt' &&
                item.param_name != 'prompts' &&
                item.param_name != 'negative_prompt'
              "
            >
              <!-- 普通文本框 -->
              <a-input
                v-model:value="normalParams[index].param_varlue"
                placeholder="请输入"
                style="width: 100%"
              />
            </div>

            <div class="form_value" v-if="item.input_type == 'number'">
              <!-- 数字文本框 -->
              <a-input-number
                :step="item.step * 1 ? item.step * 1 : 1"
                :min="item.min * 1 ? item.min * 1 : undefined"
                :max="item.max * 1 ? item.max * 1 : undefined"
                v-model:value="normalParams[index].param_varlue"
                placeholder="请输入"
                style="width: 100%"
              />
              <a-slider
                v-if="item.step && item.min && item.max"
                :step="item.step * 1 ? item.step * 1 : 1"
                :min="item.min * 1 ? item.min * 1 : 0"
                :max="item.max * 1 ? item.max * 1 : 0"
                style="margin-top: 5px"
                v-model:value="normalParams[index].param_varlue"
              />
            </div>

            <div
              class="form_value"
              v-if="
                item.input_type == 'select' &&
                item.param_name != 'is_niji' &&
                item.param_name != 'aspect_ratio'
              "
            >
              <!-- 选择框 -->
              <a-select
                v-model:value="normalParams[index].param_varlue"
                placeholder="请选择"
                style="width: 100%"
              >
                <a-select-option
                  v-for="(select_item, select_index) in item.allow_value"
                  :value="select_item"
                  :key="select_index"
                  >{{ select_item }}</a-select-option
                >
              </a-select>
            </div>
            <!-- 特殊处理选择框 -->
            <div
              class="form_value"
              v-if="item.input_type == 'select' && item.param_name == 'is_niji'"
            >
              <div class="style-list-niji">
                <div
                  class="style-item"
                  :class="
                    normalParams[index].param_varlue == val
                      ? 'active-style'
                      : ''
                  "
                  @click="selectNiji(item, val)"
                  v-for="(val, tIndex) in normalParams[index].allow_value"
                  :key="tIndex"
                >
                  <div
                    class="move-box"
                    v-if="normalParams[index].param_varlue == val"
                  ></div>
                  <img :src="niji_bg" v-if="val == '是'" class="example_img" />
                  <img :src="mj_bg" v-else class="example_img" />
                  <div class="item-bottom-niji">
                    <span class="text-blod">{{
                      val == "否" ? "Midjourney" : "Niji"
                    }}</span>
                    <span class="text-cut">{{
                      val == "否" ? "真实感强" : "卡通动漫"
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="form_value"
              v-if="
                item.input_type == 'select' && item.param_name == 'aspect_ratio'
              "
            >
              <!-- 选择框 -->
              <div class="scale-list">
                <div
                  class="scale-item"
                  :class="item.param_varlue == tItem ? 'br-purple' : ''"
                  @click="changeScaleMode(item, tItem)"
                  v-for="(tItem, tIndex) in item.allow_value"
                  :key="tIndex"
                >
                  <div
                    :class="
                      item.param_varlue == tItem ? 'bg-purple' : 'bg-grey'
                    "
                    class="scale-mode"
                    :style="getWHStyle(tItem)"
                  ></div>
                  <span
                    class="margin-top-xs"
                    :class="
                      item.param_varlue == tItem ? 'text-purple' : 'text-grey'
                    "
                    >{{ tItem }}</span
                  >
                </div>
              </div>
            </div>

            <div class="form_value" v-if="item.input_type == 'file'">
              <!-- 文件 -->
              <a-upload-dragger
                v-model:file-list="fileList"
                name="image"
                :show-upload-list="false"
                :action="$utils.imgAction"
                :headers="{ 'org-token': $store.getters.token }"
                :data="{ dir: 'work_ai' }"
                :before-upload="beforeUpload"
                @change="(value) => handleUploadChange(value, index)"
              >
                <div class="upload_con">
                  <div class="upload_txt" v-if="!loading">
                    <span class="text_1">点击或拖拽上传参考图</span>
                    <span class="text_2">支持JPG、PNG，10MB以内.</span>
                  </div>
                  <div class="upload_txt" v-else>
                    <span class="text_1">图片上传中...</span>
                  </div>
                  <div class="upload_image">
                    <template
                      v-if="!loading && !normalParams[index].param_varlue"
                    >
                      <PlusOutlined style="font-size: 14px" />
                      <span style="margin-top: 5px">上传</span>
                    </template>
                    <template
                      v-if="loading && !normalParams[index].param_varlue"
                    >
                      <LoadingOutlined style="font-size: 14px" />
                    </template>
                    <template v-if="normalParams[index].param_varlue">
                      <img
                        style="width: 100%; height: 100%"
                        :src="normalParams[index].param_varlue"
                        alt=""
                      />
                    </template>
                  </div>
                </div>
              </a-upload-dragger>
            </div>
          </div>
        </div>

        <!-- 基础参数 -->
        <div class="base_params_con" v-if="baseParams.length > 0">
          <div class="base_title">
            <div class="left_title">基础参数</div>
            <div class="right_con" @click="showBase = !showBase">
              <span style="margin-right: 10px">{{
                showBase ? "收起" : "展开"
              }}</span>
              <DownOutlined v-if="!showBase" />
              <UpOutlined v-else />
            </div>
          </div>
          <div
            v-show="showBase"
            class="form_item"
            v-for="(item, index) in baseParams"
            :key="index"
          >
            <!-- 选择风格 -->
            <choosePaintStyle
              v-if="(!hasNavigate || !hasPromop) && styleModelList.length > 0"
              :styleModelList="styleModelList"
              :styleIndex="styleIndex"
              :expandStyle="expandStyle"
              @chooseStyle="chooseStyle"
              @changeStatus="expandStyle = !expandStyle"
            />
            <div class="form_title">
              <div class="left_title">
                <span
                  v-if="item.is_required"
                  style="color: red; margin-right: 3px"
                  >*</span
                >{{ item.input_name }}
              </div>
              <a-tooltip placement="left">
                <template #title>
                  {{ item.param_intro }}
                </template>
                <QuestionCircleOutlined v-if="item.param_intro" />
              </a-tooltip>
            </div>

            <div
              class="form_value"
              style="position: relative"
              v-if="
                item.param_name == 'prompt' ||
                item.param_name == 'prompts' ||
                item.param_name == 'negative_prompt'
              "
            >
              <!-- 普通文本框 -->
              <div class="text_area_con">
                <a-textarea
                  style="
                    border: none;
                    background-color: #f6f7f9;
                    border-radius: 10px;
                  "
                  @change="(value) => inputChange(value, item.param_name)"
                  :auto-size="{
                    minRows:
                      item.param_name == 'prompt' ||
                      item.param_name == 'prompts'
                        ? 5
                        : 4,
                    maxRows:
                      item.param_name == 'prompt' ||
                      item.param_name == 'prompts'
                        ? 5
                        : 4,
                  }"
                  v-model:value="baseParams[index].param_varlue"
                  :placeholder="
                    item.param_name == 'prompt' || item.param_name == 'prompts'
                      ? '在此输入您的创意，每个提示词用逗号分开，如：一个女孩，绿色头发，校园'
                      : '请输入'
                  "
                />

                <div
                  v-if="
                    item.param_name == 'prompt' || item.param_name == 'prompts'
                  "
                  class="textarea_bottom"
                >
                  <a-button
                    v-if="currentTab == 'sd'"
                    type="link"
                    style="padding: 0; margin: 0"
                    @click="vocabularyVisible = true"
                    >推荐词</a-button
                  >
                  <a-button
                    v-else
                    :loading="btnLoading"
                    :disabled="!baseParams[index].param_varlue"
                    type="link"
                    style="padding: 0; margin: 0"
                    @click="getPrompts(baseParams[index])"
                    >提示词生成</a-button
                  >
                  <a style="color: #999" @click="clearPrompt">清空</a>
                </div>
              </div>
              <template v-if="currentTab == 'sd'">
                <div
                  class="bottom_tips"
                  v-if="
                    item.param_name == 'prompt' || item.param_name == 'prompts'
                  "
                >
                  <div style="display: flex; align-items: center">
                    <span style="font-size: 12px">示范:</span>
                    <span class="prompt_title" v-if="promptTitle.length > 0">
                      <a
                        class="a_link"
                        @click="chooseRecommad(prom_item)"
                        v-for="(prom_item, prom_index) in promptTitle"
                        :key="prom_index"
                        >{{ prom_item.title }}</a
                      >
                    </span>
                  </div>
                  <RedoOutlined
                    class="refrash_icon"
                    @click="getPromptList"
                    :class="loadPrompt ? 'prompt_loading' : ''"
                  />
                </div>
              </template>
            </div>

            <div
              class="form_value"
              v-if="
                item.input_type == 'text' &&
                item.param_name != 'prompt' &&
                item.param_name != 'prompts' &&
                item.param_name != 'negative_prompt'
              "
            >
              <!-- 普通文本框 -->
              <a-input
                v-model:value="baseParams[index].param_varlue"
                placeholder="请输入"
                style="width: 100%"
              />
            </div>

            <div class="form_value" v-if="item.input_type == 'number'">
              <!-- 数字文本框 -->
              <a-input-number
                :step="item.step * 1 ? item.step * 1 : 1"
                :min="item.min * 1 ? item.min * 1 : undefined"
                :max="item.max * 1 ? item.max * 1 : undefined"
                v-model:value="baseParams[index].param_varlue"
                placeholder="请输入"
                style="width: 100%"
              />
              <a-slider
                v-if="item.step && item.min && item.max"
                :step="item.step * 1 ? item.step * 1 : 1"
                :min="item.min * 1 ? item.min * 1 : 0"
                :max="item.max * 1 ? item.max * 1 : 0"
                style="margin-top: 5px"
                v-model:value="baseParams[index].param_varlue"
              />
            </div>

            <div
              class="form_value"
              v-if="
                item.input_type == 'select' &&
                item.param_name != 'is_niji' &&
                item.param_name != 'aspect_ratio'
              "
            >
              <!-- 选择框 -->
              <a-select
                v-model:value="baseParams[index].param_varlue"
                placeholder="请选择"
                style="width: 100%"
              >
                <a-select-option
                  v-for="(select_item, select_index) in item.allow_value"
                  :value="select_item"
                  :key="select_index"
                  >{{ select_item }}</a-select-option
                >
              </a-select>
            </div>
            <!-- 特殊处理选择框 -->
            <div
              class="form_value"
              v-if="item.input_type == 'select' && item.param_name == 'is_niji'"
            >
              <div class="style-list-niji">
                <div
                  class="style-item"
                  :class="
                    baseParams[index].param_varlue == val ? 'active-style' : ''
                  "
                  @click="selectNiji(item, val)"
                  v-for="(val, tIndex) in baseParams[index].allow_value"
                  :key="tIndex"
                >
                  <div
                    class="move-box"
                    v-if="baseParams[index].param_varlue == val"
                  ></div>
                  <img :src="niji_bg" v-if="val == '是'" class="example_img" />
                  <img :src="mj_bg" v-else class="example_img" />
                  <div class="item-bottom-niji">
                    <span class="text-blod">{{
                      val == "否" ? "Midjourney" : "Niji"
                    }}</span>
                    <span class="text-cut">{{
                      val == "否" ? "真实感强" : "卡通动漫"
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="form_value"
              v-if="
                item.input_type == 'select' && item.param_name == 'aspect_ratio'
              "
            >
              <!-- 选择框 -->
              <div class="scale-list">
                <div
                  class="scale-item"
                  :class="item.param_varlue == tItem ? 'br-purple' : ''"
                  @click="changeScaleMode(item, tItem)"
                  v-for="(tItem, tIndex) in item.allow_value"
                  :key="tIndex"
                >
                  <div
                    :class="
                      item.param_varlue == tItem ? 'bg-purple' : 'bg-grey'
                    "
                    class="scale-mode"
                    :style="getWHStyle(tItem)"
                  ></div>
                  <span
                    class="margin-top-xs"
                    :class="
                      item.param_varlue == tItem ? 'text-purple' : 'text-grey'
                    "
                    >{{ tItem }}</span
                  >
                </div>
              </div>
            </div>

            <div class="form_value" v-if="item.input_type == 'file'">
              <!-- 文件 -->
              <a-upload-dragger
                v-model:file-list="fileList"
                name="image"
                :show-upload-list="false"
                :action="$utils.imgAction"
                :headers="{ 'org-token': $store.getters.token }"
                :data="{ dir: 'work_ai' }"
                :before-upload="beforeUpload"
                @change="(value) => handleUploadChange(value, index)"
              >
                <div class="upload_con">
                  <div class="upload_txt" v-if="!loading">
                    <span class="text_1">点击或拖拽上传参考图</span>
                    <span class="text_2">支持JPG、PNG，10MB以内.</span>
                  </div>
                  <div class="upload_txt" v-else>
                    <span class="text_1">图片上传中...</span>
                  </div>
                  <div class="upload_image">
                    <template
                      v-if="!loading && !baseParams[index].param_varlue"
                    >
                      <PlusOutlined style="font-size: 14px" />
                      <span style="margin-top: 5px">上传</span>
                    </template>
                    <template v-if="loading && !baseParams[index].param_varlue">
                      <LoadingOutlined style="font-size: 14px" />
                    </template>
                    <template v-if="baseParams[index].param_varlue">
                      <img
                        style="width: 100%; height: 100%"
                        :src="baseParams[index].param_varlue"
                        alt=""
                      />
                    </template>
                  </div>
                </div>
              </a-upload-dragger>
              <!-- 选择风格 -->
              <choosePaintStyle
                v-if="(!hasNavigate || !hasPromop) && styleModelList.length > 0"
                :styleModelList="styleModelList"
                :styleIndex="styleIndex"
                :expandStyle="expandStyle"
                @chooseStyle="chooseStyle"
                @changeStatus="expandStyle = !expandStyle"
              />
            </div>
          </div>
        </div>

        <!-- 高级参数 -->
        <div class="senior_params_con" v-if="seniorParams.length > 0">
          <div class="senior_title">
            <div class="left_title">高级参数</div>
            <div class="right_con" @click="showSenior = !showSenior">
              <span style="margin-right: 10px">{{
                showSenior ? "收起" : "展开"
              }}</span>
              <DownOutlined v-if="!showSenior" />
              <UpOutlined v-else />
            </div>
          </div>
          <div
            v-show="showSenior"
            class="form_item"
            v-for="(item, index) in seniorParams"
            :key="index"
          >
            <!-- 选择风格 -->
            <choosePaintStyle
              v-if="
                ((hasNavigate && item.param_name == 'negative_prompt') ||
                  (!hasNavigate &&
                    (item.param_name == 'prompt' ||
                      item.param_name == 'prompts'))) &&
                styleModelList.length > 0
              "
              :styleModelList="styleModelList"
              :styleIndex="styleIndex"
              :expandStyle="expandStyle"
              @chooseStyle="chooseStyle"
              @changeStatus="expandStyle = !expandStyle"
            />
            <div class="form_title">
              <div class="left_title">
                <span
                  v-if="item.is_required"
                  style="color: red; margin-right: 3px"
                  >*</span
                >{{ item.input_name }}
              </div>
              <a-tooltip placement="left">
                <template #title>
                  {{ item.param_intro }}
                </template>
                <QuestionCircleOutlined v-if="item.param_intro" />
              </a-tooltip>
            </div>

            <div
              class="form_value"
              style="position: relative"
              v-if="
                item.param_name == 'prompt' ||
                item.param_name == 'prompts' ||
                item.param_name == 'negative_prompt'
              "
            >
              <!-- 普通文本框 -->
              <div class="text_area_con">
                <a-textarea
                  style="
                    border: none;
                    background-color: #f6f7f9;
                    border-radius: 10px;
                  "
                  @change="(value) => inputChange(value, item.param_name)"
                  :auto-size="{
                    minRows:
                      item.param_name == 'prompt' ||
                      item.param_name == 'prompts'
                        ? 5
                        : 4,
                    maxRows:
                      item.param_name == 'prompt' ||
                      item.param_name == 'prompts'
                        ? 5
                        : 4,
                  }"
                  v-model:value="seniorParams[index].param_varlue"
                  :placeholder="
                    item.param_name == 'prompt' || item.param_name == 'prompts'
                      ? '在此输入您的创意，每个提示词用逗号分开，如：一个女孩，绿色头发，校园'
                      : '请输入'
                  "
                />

                <div
                  v-if="
                    item.param_name == 'prompt' || item.param_name == 'prompts'
                  "
                  class="textarea_bottom"
                >
                  <a-button
                    v-if="currentTab == 'sd'"
                    type="link"
                    style="padding: 0; margin: 0"
                    @click="vocabularyVisible = true"
                    >推荐词</a-button
                  >
                  <a-button
                    v-else
                    :loading="btnLoading"
                    :disabled="!seniorParams[index].param_varlue"
                    type="link"
                    style="padding: 0; margin: 0"
                    @click="getPrompts(seniorParams[index])"
                    >提示词生成</a-button
                  >
                  <a style="color: #999" @click="clearPrompt">清空</a>
                </div>
              </div>
              <template v-if="currentTab == 'sd'">
                <div
                  class="bottom_tips"
                  v-if="
                    item.param_name == 'prompt' || item.param_name == 'prompts'
                  "
                >
                  <div style="display: flex; align-items: center">
                    <span>示范:</span>
                    <span class="prompt_title" v-if="promptTitle.length > 0">
                      <a
                        class="a_link"
                        @click="chooseRecommad(prom_item)"
                        v-for="(prom_item, prom_index) in promptTitle"
                        :key="prom_index"
                        >{{ prom_item.title }}</a
                      >
                    </span>
                  </div>
                  <RedoOutlined
                    class="refrash_icon"
                    @click="getPromptList"
                    :class="loadPrompt ? 'prompt_loading' : ''"
                  />
                </div>
              </template>
              <!-- 选择风格 -->
              <choosePaintStyle
                v-if="
                  ((hasNavigate && item.param_name == 'negative_prompt') ||
                    (!hasNavigate &&
                      (item.param_name == 'prompt' ||
                        item.param_name == 'prompts'))) &&
                  styleModelList.length > 0
                "
                :styleModelList="styleModelList"
                :styleIndex="styleIndex"
                :expandStyle="expandStyle"
                @chooseStyle="chooseStyle"
                @changeStatus="expandStyle = !expandStyle"
              />
            </div>

            <div
              class="form_value"
              v-if="
                item.input_type == 'text' &&
                item.param_name != 'prompt' &&
                item.param_name != 'prompts' &&
                item.param_name != 'negative_prompt'
              "
            >
              <!-- 普通文本框 -->
              <a-input
                v-model:value="seniorParams[index].param_varlue"
                placeholder="请输入"
                style="width: 100%"
              />
            </div>

            <div class="form_value" v-if="item.input_type == 'number'">
              <!-- 数字文本框 -->
              <a-input-number
                :step="item.step * 1 ? item.step * 1 : 1"
                :min="item.min * 1 ? item.min * 1 : undefined"
                :max="item.max * 1 ? item.max * 1 : undefined"
                v-model:value="seniorParams[index].param_varlue"
                placeholder="请输入"
                style="width: 100%"
              />
              <a-slider
                v-if="item.step && item.min && item.max"
                :step="item.step * 1 ? item.step * 1 : 1"
                :min="item.min * 1 ? item.min * 1 : 0"
                :max="item.max * 1 ? item.max * 1 : 0"
                style="margin-top: 5px"
                v-model:value="seniorParams[index].param_varlue"
              />
            </div>

            <div
              class="form_value"
              v-if="
                item.input_type == 'select' &&
                item.param_name != 'is_niji' &&
                item.param_name != 'aspect_ratio'
              "
            >
              <!-- 选择框 -->
              <a-select
                v-model:value="seniorParams[index].param_varlue"
                placeholder="请选择"
                style="width: 100%"
              >
                <a-select-option
                  v-for="(select_item, select_index) in item.allow_value"
                  :value="select_item"
                  :key="select_index"
                  >{{ select_item }}</a-select-option
                >
              </a-select>
            </div>
            <!-- 特殊处理选择框 -->
            <div
              class="form_value"
              v-if="item.input_type == 'select' && item.param_name == 'is_niji'"
            >
              <div class="style-list-niji">
                <div
                  class="style-item"
                  :class="
                    seniorParams[index].param_varlue == val
                      ? 'active-style'
                      : ''
                  "
                  @click="selectNiji(item, val)"
                  v-for="(val, tIndex) in seniorParams[index].allow_value"
                  :key="tIndex"
                >
                  <div
                    class="move-box"
                    v-if="seniorParams[index].param_varlue == val"
                  ></div>
                  <img :src="niji_bg" v-if="val == '是'" class="example_img" />
                  <img :src="mj_bg" v-else class="example_img" />
                  <div class="item-bottom-niji">
                    <span class="text-blod">{{
                      val == "否" ? "Midjourney" : "Niji"
                    }}</span>
                    <span class="text-cut">{{
                      val == "否" ? "真实感强" : "卡通动漫"
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="form_value"
              v-if="
                item.input_type == 'select' && item.param_name == 'aspect_ratio'
              "
            >
              <!-- 选择框 -->
              <div class="scale-list">
                <div
                  class="scale-item"
                  :class="item.param_varlue == tItem ? 'br-purple' : ''"
                  @click="changeScaleMode(item, tItem)"
                  v-for="(tItem, tIndex) in item.allow_value"
                  :key="tIndex"
                >
                  <div
                    :class="
                      item.param_varlue == tItem ? 'bg-purple' : 'bg-grey'
                    "
                    class="scale-mode"
                    :style="getWHStyle(tItem)"
                  ></div>
                  <span
                    class="margin-top-xs"
                    :class="
                      item.param_varlue == tItem ? 'text-purple' : 'text-grey'
                    "
                    >{{ tItem }}</span
                  >
                </div>
              </div>
            </div>
            <div class="form_value" v-if="item.input_type == 'file'">
              <!-- 文件 -->
              <a-upload-dragger
                v-model:file-list="fileList"
                name="image"
                :show-upload-list="false"
                :action="$utils.imgAction"
                :headers="{ 'org-token': $store.getters.token }"
                :data="{ dir: 'work_ai' }"
                :before-upload="beforeUpload"
                @change="(value) => handleUploadChange(value, index)"
              >
                <div class="upload_con">
                  <div class="upload_txt" v-if="!loading">
                    <span class="text_1">点击或拖拽上传参考图</span>
                    <span class="text_2">支持JPG、PNG，10MB以内.</span>
                  </div>
                  <div class="upload_txt" v-else>
                    <span class="text_1">图片上传中...</span>
                  </div>
                  <div class="upload_image">
                    <template
                      v-if="!loading && !seniorParams[index].param_varlue"
                    >
                      <PlusOutlined style="font-size: 14px" />
                      <span style="margin-top: 5px">上传</span>
                    </template>
                    <template
                      v-if="loading && !seniorParams[index].param_varlue"
                    >
                      <LoadingOutlined style="font-size: 14px" />
                    </template>
                    <template v-if="seniorParams[index].param_varlue">
                      <img
                        style="width: 100%; height: 100%"
                        :src="seniorParams[index].param_varlue"
                        alt=""
                      />
                    </template>
                  </div>
                </div>
              </a-upload-dragger>
              <!-- 选择风格 -->
              <choosePaintStyle
                v-if="(!hasNavigate || !hasPromop) && styleModelList.length > 0"
                :styleModelList="styleModelList"
                :styleIndex="styleIndex"
                :expandStyle="expandStyle"
                @chooseStyle="chooseStyle"
                @changeStatus="expandStyle = !expandStyle"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="bottom_btn" v-if="!noParamsList">
        <span class="consume_tips" v-if="consumeCountNum">
          将消耗：{{ consumeCountNum }}次
        </span>
        <a-button
          style="width: 100%; margin-top: 10px"
          :disabled="isGenerate"
          :class="!isGenerate ? 'create_btn' : ''"
          @click="generateImage"
          >{{ isGenerate ? "生成中..." : "立即生成" }}
        </a-button>

        <a-tooltip>
          <template #title
            >该服务处于前沿探索阶段，您应当合法合规使用本服务，并承担由此产生的所有责任。我们对您的使用不做保证且不承担任何责任。</template
          >
          <div class="disclaimer-wrap" @click="disclaimerClick">
            <ExclamationCircleOutlined />
            免责声明
          </div>
        </a-tooltip>
      </div>
    </div>

    <a-modal
      title="推荐词"
      :visible="vocabularyVisible"
      :width="600"
      centered
      @ok="vocabularyVisible = false"
      @cancel="vocabularyVisible = false"
    >
      <div class="keywords_con">
        <div class="tab_list">
          <div
            @click="tagTabChange(index, 'first')"
            :class="currentIndex == index ? 'active' : ''"
            class="tab_item"
            v-for="(item, index) in menuList"
            :key="index"
          >
            {{ item.name }}
          </div>
          <div class="line_height"></div>
          <div class="sub_container">
            <div class="sub_item" v-for="(item, index) in subMenu" :key="index">
              <div class="label_title" @click="tagTabChange(index, 'second')">
                <UpOutlined v-if="item.visible" />
                <DownOutlined v-else />
                <span style="font-weight: 600; color: #333333; margin-left: 3px"
                  >{{ item.name }}（{{ item.words.length }}）</span
                >
              </div>
              <div class="tags_con" v-if="item.visible">
                <div
                  @click="chooseTagsItems(index, words_index)"
                  :class="words_item.checked ? 'active' : ''"
                  class="tab_item"
                  v-for="(words_item, words_index) in item.words"
                  :key="words_index"
                >
                  {{ words_item.name }}（{{ words_item.assist_prompt }}）
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <a-modal
      v-model:visible="modalConfirmVisible"
      title="提示"
      ok-text="确定等待"
      cancel-text="我的作品"
      @ok="modalConfirmOKCallback"
      @cancel="modalConfirmCancelCallback"
    >
      绘画任务正在排队制作中，生成后将在我的作品中展示
    </a-modal>

    <LoginModal
      :visible="loginVisible"
      @onClose="loginVisible = false"
      @loginCallback="loginCallback"
    />

    <memberShip
      :visible="showMemberShip"
      @close="showMemberShip = false"
      :type="2"
    />
    <!-- 展示放大后的图片 -->
    <div
      class="img-mask"
      @click="imgVisible = false"
      :style="{ display: imgVisible ? 'flex' : 'none' }"
    >
      <!-- <CloseCircleOutlined class="mask-close" @click="imgVisible=false" /> -->
      <img :src="currentBiggerImgUrl" class="img-center" />
    </div>
    <!-- <a-modal v-model:visible="imgVisible" width="600px" :footer="false" title="图片详情" >
      <img :src="currentBiggerImgUrl" alt="" style="width: 100%" />
    </a-modal> -->
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  nextTick,
  watch,
} from "vue";
import { message, Modal } from "ant-design-vue";
import {
  QuestionCircleOutlined,
  PlusOutlined,
  LoadingOutlined,
  UpOutlined,
  DownOutlined,
  CheckOutlined,
  DeleteOutlined,
  VerticalAlignBottomOutlined,
  RedoOutlined,
  HeartFilled,
  HeartOutlined,
  ExclamationCircleOutlined,
  LeftCircleOutlined,
  RightCircleOutlined,
  CloseCircleOutlined,
  ForwardOutlined,
} from "@ant-design/icons-vue";
import request from "../../common/utils/request";
import utils from "../../common/utils/utils.js";
import moment from "moment";
import axios from "axios";
import store from "../../store/index.js";
import { useRoute, useRouter } from "vue-router";
import memberShip from "../vip/modules/memberShip.vue";
import choosePaintStyle from "./components/chooseStyle.vue";
import { streamFetch } from "../../common/utils/streamFetch";
import defaultSetting from "../../common/utils/defaultSetting";

import defaultImg from '../../common/image/paint_default.png'
export default defineComponent({
  components: {
    QuestionCircleOutlined,
    PlusOutlined,
    LoadingOutlined,
    UpOutlined,
    DownOutlined,
    DeleteOutlined,
    VerticalAlignBottomOutlined,
    memberShip,
    RedoOutlined,
    HeartFilled,
    HeartOutlined,
    choosePaintStyle,
    ExclamationCircleOutlined,
    LeftCircleOutlined,
    RightCircleOutlined,
    // CloseCircleOutlined,
  },
  setup(props, context) {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      defaultImg,
      mj_bg: utils.staticPath + "images/workAi/mj-bg.png",
      niji_bg: utils.staticPath + "images/workAi/niji-bg.png",
      currentBiggerImgIndex: 1,
      imgVisible: false,
      tabList: [
        {
          tab_name: "热门模型",
          value: 1,
        },
        {
          tab_name: "我的收藏",
          value: 2,
        },
        {
          tab_name: "我的创作",
          value: 3,
        },
      ],
      modelList: [],

      imageTabIndex: 0,
      fileList: [],
      imageUrl: "",
      loading: false,
      caseInfo: {},
      paramsList: [],
      promptInitial: "",
      isGenerate: false,
      imageLoading: false,
      loadOver: false,
      caseId: "",
      outputImages: [],
      currentOutIndex: 0,

      //辅助词
      currentIndex: 0,
      menuList: [],
      subMenu: [],
      modelLoading: false,
      pageInfo: {
        title: "",
        page: 1,
        pageSize: 10,
      },
      noMore: false,
      maxPage: 1,
      promptTitle: [],
      fitWidth: true,
      downloadIng: false,
      styleIndex: -1,
      styleModelList: [],
      mateConsume: [],
      loginVisible: false,
      showMemberShip: false,
      expandStyle: false,
      vocabularyVisible: false,
      hasNavigate: false,
      showDetail: false,
      hasPromop: false,
      loadPrompt: false,

      normalParams: [],
      baseParams: [],
      seniorParams: [],
      showSenior: false,
      showBase: false,
      disclaimer_url: "", //免责声明
      hotModelList: [], //热门模型 用于匹配
      paramsLoading: false,
      noParamsList: false,
      hideLeft: false, //隐藏左侧
      currentPage: 0,
      currentTab: "sd",
      btnLoading: false,
      tLoading: false,
      carouselKey: 0,

      modalConfirmVisible: false,
      modalConfirmOKCallback: () => {},
      modalConfirmCancelCallback: () => {}
    });
    const onChange = (current) => {
      state.currentPage = current;
    };

    const middleTopStyle = computed(() => {
      if (state.outputImages.length > 0 || state.currentTab == "mj") {
        return {
          height: `calc(100% - 80px)`,
        };
      }
      return {
        height: `100%`,
      };
    });

    const middleConStyle = computed(() => {
      if (state.hideLeft) {
        return {
          width: "80%",
        };
      } else {
        return {
          width: "60%",
        };
      }
    });

    const rightConStyle = computed(() => {
      return {};
    });

    const searchThis = () => {
      state.pageInfo.page = 1;
      state.modelList = [];
      if (state.imageTabIndex == 0) {
        getHotModal();
      } else if (state.imageTabIndex == 1) {
        getMyCollect();
      } else if (state.imageTabIndex == 2) {
        getMyCreate();
      }
    };

    const getHotModal = () => {
      state.modelLoading = true;
      let params = {};
      Object.assign(params, state.pageInfo);
      if (params.page == 1) {
        state.modelList = [];
      }
      if (
        route.query.type == "text2image" ||
        route.query.type == "image2image"
      ) {
        params.feature = route.query.type;
      } else if (route.query.type) {
        params.model_id = route.query.type;
      }
      request
        .get("/work_ai", "/user/image/case/hotmodel/list", params)
        .then((res) => {
          state.modelLoading = false;
          state.modelList = [...state.modelList, ...res.result.data];
          state.modelList.map((v) => {
            v.collect = v.collection ? 1 : 0;
          });
          computeMaxpage(res.result.total);
        })
        .catch((err) => {
          state.modelLoading = false;
        });
    };

    const getMyCreate = () => {
      state.modelLoading = true;
      request
        .get("/work_ai", "/user/ai/case/list", state.pageInfo)
        .then((res) => {
          state.modelLoading = false;
          if (state.pageInfo.page == 1) {
            state.modelList = res.result.data;
          } else {
            state.modelList = [...state.modelList, ...res.result.data];
          }
          computeMaxpage(res.result.total);
        })
        .catch((err) => {
          state.modelLoading = false;
        });
    };

    const getMyCollect = () => {
      state.modelLoading = true;
      request
        .get("/work_ai", "/user/image/case/collect/list", state.pageInfo)
        .then((res) => {
          state.modelLoading = false;
          if (state.pageInfo.page == 1) {
            state.modelList = res.result.data;
          } else {
            state.modelList = [...state.modelList, ...res.result.data];
          }
          computeMaxpage(res.result.total);
        })
        .catch((err) => {
          state.modelLoading = false;
        });
    };

    const computeMaxpage = (count) => {
      state.noMore = false;
      if (count % 10 == 0) {
        state.maxPage = parseInt(count / 10);
      } else {
        state.maxPage = parseInt(count / 10 + 1);
      }
    };

    const tabChange = (index) => {
      state.currentPage = 0;
      if (state.imageTabIndex == index) return;
      state.pageInfo.page = 1;
      state.pageInfo.title = "";
      if (index == 0) {
        state.imageTabIndex = index;
        state.modelList = [];
        getHotModal();
      } else {
        utils.checkLogin().then((isLogin) => {
          if (!isLogin) {
            state.loginVisible = true;
            return;
          }
          state.imageTabIndex = index;
          state.modelList = [];
          if (index == 1) {
            getMyCollect();
          } else if (index == 2) {
            getMyCreate();
          }
        });
      }
    };

    const handleUploadChange = (info, index) => {
      state.paramsList[index].param_varlue = "";
      if (info.file.status === "uploading") {
        state.loading = true;
        return;
      }
      if (info.file.status === "done") {
        if (info.file.response.code == 1000) {
          const { fileName, fileUrl } = info.file.response.data;
          state.paramsList[index].param_varlue = fileUrl;
          state.loading = false;
        }
      }
      if (info.file.status === "error") {
        state.loading = false;
        message.error("上传失败");
      }
    };

    const beforeUpload = (file) => {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        message.error("你只能上传jpg或png格式文件!");
      }
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        message.error("上传图片大小必须小于10MB!");
      }
      return isJpgOrPng && isLt2M;
    };

    const getParamsList = (id) => {
      state.paramsLoading = true;
      state.noParamsList = false;
      request
        .get("/work_ai", "/ai/aimodel/input/list", {
          ai_art_model_id: id,
          is_show: 1,
        })
        .then((res) => {
          state.paramsLoading = false;
          state.paramsList = [];
          state.normalParams = [];
          state.baseParams = [];
          state.seniorParams = [];
          if (res.data.length == 0) {
            state.noParamsList = true;
          }
          nextTick(() => {
            state.hasNavigate = false;
            res.data.map((v, i) => {
              if (v.param_varlue && v.input_type == "number") {
                v.param_varlue = v.param_varlue * 1;
              }
              if (v.param_name == "prompt" || v.param_name == "prompts") {
                state.hasPromop = true;
                state.promptInitial = v.param_varlue;
              }
              if (!v.param_varlue) {
                if (v.input_type == "number") {
                  v.param_varlue = v.default_value * 1;
                } else {
                  v.param_varlue = v.default_value;
                }
              }
              if (v.param_name == "negative_prompt") {
                state.hasNavigate = true;
              }
              state.paramsList.push(v);
            });

            state.paramsList.map((v) => {
              if (v.show_type_group == 2) {
                state.seniorParams.push(v);
              } else if (v.show_type_group == 1) {
                state.baseParams.push(v);
              } else {
                state.normalParams.push(v);
              }
            });
            getPromptList();
            if (state.caseInfo.id) {
              getCaseInfo(state.caseInfo.id);
            }
          });
        })
        .catch((err) => {
          state.paramsLoading = false;
        });
    };

    const getCaseInfo = (id, showModal = false) => {
      request
        .get("/work_ai", "/user/image/case/detail", {
          caseId: id,
        })
        .then((res) => {
          state.caseInfo = res.result;
          state.caseInfo.aspect_ratio =
            res.result.case_prompt.full_input.aspect_ratio;
          state.currentTab =
            state.caseInfo.platform.api == "midjourney" ? "mj" : "sd";

          getStyleModel();
          state.caseInfo.collect = state.caseInfo.collection ? 1 : 0;

          if (state.caseInfo.images[0] && state.caseInfo.images[0].origin_uri) {
            let imgs = state.caseInfo.third_image
              ? state.caseInfo.third_image
              : [];
            let img = {
              id: state.caseInfo.images[0].id,
              url: state.caseInfo.images[0].origin_uri,
            };
            imgs.splice(0, 0, img);

            state.caseInfo.third_image = imgs;
          }

          if (showModal) {
            state.imgVisible = true;
          }
          utils.setStorage("caseInfo", JSON.stringify(state.caseInfo));
          state.carouselKey++;
          getImgInfo(state.caseInfo.images[0]?.uri ?? "");
          let caseInput = res.result.case_prompt.full_input;
          state.paramsList.map((item, index) => {
            if (caseInput[item.param_name]) {
              if (state.paramsList[index].input_type == "number") {
                state.paramsList[index].param_varlue =
                  caseInput[item.param_name] * 1;
              } else {
                state.paramsList[index].param_varlue =
                  caseInput[item.param_name];
              }
            }
            if (item.param_name == "prompt" || item.param_name == "prompts") {
              state.promptInitial = caseInput[item.param_name];
            }
          });

          state.normalParams = [];
          state.seniorParams = [];
          state.baseParams = [];
          nextTick(() => {
            state.paramsList.map((v) => {
              if (v.show_type_group == 2) {
                state.seniorParams.push(v);
              } else if (v.show_type_group == 1) {
                state.baseParams.push(v);
              } else {
                state.normalParams.push(v);
              }
            });
          });
        });
    };

    const loginCallback = () => {
      state.loginVisible = false;
      router.go(0);
    };

    const generateImage = () => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        let flag = true;
        let arr_need = [];
        let paramsObj = {};
        state.normalParams.map((v) => {
          paramsObj[v.param_name] = v.param_varlue;
          if (v.is_required && !v.param_varlue) {
            flag = false;
            arr_need.push(v.input_name);
          }
        });
        state.seniorParams.map((v) => {
          paramsObj[v.param_name] = v.param_varlue;
          if (v.is_required && !v.param_varlue) {
            flag = false;
            arr_need.push(v.input_name);
          }
        });
        state.baseParams.map((v) => {
          paramsObj[v.param_name] = v.param_varlue;
          if (v.is_required && !v.param_varlue) {
            flag = false;
            arr_need.push(v.input_name);
          }
        });
        if (!flag) {
          message.warn(arr_need + "等字段必填");
          return;
        }
        state.isGenerate = true;
        paramsObj.platformId = state.caseInfo.platform_id;
        paramsObj.modelId = state.caseInfo.model_id;
        paramsObj.featureId = state.caseInfo.feature_id;
        let teamId = store.state.user.teamId;
        if (teamId) {
          paramsObj.team_id = teamId;
        }
        state.imageLoading = true;
        if (
          state.caseInfo.feature &&
          state.caseInfo.feature.feature == "text2image"
        ) {
          request
            .post("/work_ai", "/ai/text2image/generate", paramsObj)
            .then((res) => {
              if (res.result.status == "error") {
                message.error(res.result.message);
                state.isGenerate = false;
                state.imageLoading = false;
                return;
              }
              let params = {};
              params.replicateId = res.result.id;
              params.modelId = paramsObj.modelId;
              params.featureId = paramsObj.featureId;
              params.platformId = paramsObj.platformId;
              state.caseId = res.result.caseId;
              state.caseInfo.id = res.result.caseId;

              state.modalConfirmOKCallback = () => {
                state.modalConfirmVisible = false

                getResult(params)
              }

              state.modalConfirmCancelCallback = () => {
                state.modalConfirmVisible = false

                state.isGenerate = false;
                state.imageLoading = false;

                tabChange(2);
              }
              
              state.modalConfirmVisible = true
            })
            .catch((err) => {
              state.isGenerate = false;
              state.imageLoading = false;
              if (err.code == 36402) {
                state.showMemberShip = true;
                message.warn(err.msg);
              }
            });
        } else if (
          state.caseInfo.feature &&
          state.caseInfo.feature.feature == "image2image"
        ) {
          request
            .post("/work_ai", "/ai/image2image/generate", paramsObj)
            .then((res) => {
              if (res.result.status == "error") {
                message.error(res.result.message);
                state.isGenerate = false;
                state.imageLoading = false;
                return;
              }
              let params = {};
              params.replicateId = res.result.id;
              params.modelId = paramsObj.modelId;
              params.featureId = paramsObj.featureId;
              params.platformId = paramsObj.platformId;
              state.caseId = res.result.caseId;
              state.caseInfo.id = res.result.caseId;

              state.modalConfirmOKCallback = () => {
                state.modalConfirmVisible = false
                getResult(params)
              }

              state.modalConfirmCancelCallback = () => {
                state.modalConfirmVisible = false

                state.isGenerate = false;
                state.imageLoading = false;
                tabChange(2);
              }
              
              state.modalConfirmVisible = true
            })
            .catch((err) => {
              state.isGenerate = false;
              state.imageLoading = false;
              if (err.code == 36402) {
                state.showMemberShip = true;
                message.warn(err.msg);
              }
            });
        }
      });
    };

    const getResult = (params, refreshMyWorks) => {
      request
        .post("/work_ai", "/ai/generate/result", params)
        .then((res) => {
          if (
            res.result.status != "success" &&
            res.result.status != "succeeded" &&
            res.result.status != "failed" &&
            res.result.status != "error"
          ) {
            let obj = {};
            Object.assign(obj, params);
            obj.replicateId = res.result.replicate_id;
            let timeout = setTimeout(() => {
              getResult(obj, refreshMyWorks);
              clearTimeout(timeout);
            }, 1500);
          }
          if (
            res.result.status == "success" ||
            res.result.status == "succeeded"
          ) {
            state.isGenerate = false;
            state.tLoading = false;
            state.loadOver = true;
            state.currentPage = 0;
            message.success("生成完成！");
            if (state.caseId) {
              getCaseInfo(state.caseId);
            }
            console.log(refreshMyWorks, state.imageTabIndex);
            if (refreshMyWorks && state.imageTabIndex == 2) {
              tabChange(2);
            }
            state.outputImages = res.result.output;
            state.currentOutIndex = res.result.output.length - 1;
            state.imageLoading = false;
            if (state.outputImages.length > 0) {
              getImgInfo(state.outputImages[0]);
            }
          }

          if (res.result.output && res.result.output.length > 0) {
            state.outputImages = res.result.output;
            state.currentOutIndex = res.result.output.length - 1;
            if (state.outputImages.length > 0) {
              getImgInfo(state.outputImages[0]);
            }
          }

          if (res.result.status == "failed" || res.result.status == "error") {
            state.isGenerate = false;
            state.imageLoading = false;
            state.tLoading = false;
            message.error(res.result.error);
          }
        })
        .catch((err) => {
          state.isGenerate = false;
          state.imageLoading = false;
          state.tLoading = false;
        });
    };

    const tagTabChange = (index, type) => {
      if (type == "first") {
        if (state.currentIndex == index) return;
        state.currentIndex = index;
        state.subMenu = state.menuList[index].children;
        if (state.subMenu.length > 0) {
          state.subMenu[0].visible = true;
        }
      }
      if (type == "second") {
        if (!state.subMenu[index].visible) {
          state.subMenu[index].visible = true;
        } else {
          state.subMenu[index].visible = false;
        }
      }
    };
    const chooseTagsItems = (index, sub_index) => {
      if (!state.subMenu[index].words[sub_index].checked) {
        state.subMenu[index].words[sub_index].checked = true;
      } else {
        state.subMenu[index].words[sub_index].checked = false;
      }
      let text = "";
      state.menuList.map((first_item) => {
        if (first_item.children && first_item.children.length > 0) {
          first_item.children.map((second_item) => {
            if (second_item.words && second_item.words.length > 0) {
              second_item.words.map((third_item) => {
                if (third_item.checked) {
                  text += third_item.assist_prompt + ",";
                }
              });
            }
          });
        }
      });
      text = text.substring(0, text.length - 1);
      state.paramsList.map((item, index) => {
        if (
          (item.param_name == "prompt" || item.param_name == "prompts") &&
          text
        ) {
          if (state.promptInitial) {
            let last = state.promptInitial.substring(
              state.promptInitial.length - 1,
              state.promptInitial.length
            );
            if (last == ",") {
              state.paramsList[index].param_varlue = state.promptInitial + text;
            } else {
              state.paramsList[index].param_varlue =
                state.promptInitial + "," + text;
            }
          } else {
            state.paramsList[index].param_varlue = state.promptInitial + text;
          }
        }
        if (
          (item.param_name == "prompt" || item.param_name == "prompts") &&
          !text
        ) {
          state.paramsList[index].param_varlue = state.promptInitial;
        }
      });

      state.normalParams = [];
      state.seniorParams = [];
      state.baseParams = [];
      nextTick(() => {
        state.paramsList.map((v) => {
          if (v.show_type_group == 2) {
            state.seniorParams.push(v);
          } else if (v.show_type_group == 1) {
            state.baseParams.push(v);
          } else {
            state.normalParams.push(v);
          }
        });
      });
    };

    const getVocabularyList = () => {
      request
        .get("/work_ai", "/ai/aimodel/assist/wordAndCate/list", {})
        .then((res) => {
          state.menuList = res.result;
          if (state.menuList.length > 0) {
            state.currentIndex = 0;
            state.subMenu = res.result[0].children;
            if (state.subMenu.length > 0) {
              state.subMenu[0].visible = true;
            }
          }
        });
    };

    const chooseRecommad = (obj) => {
      state.paramsList.map((item, index) => {
        if (item.param_name == "prompt" || item.param_name == "prompts") {
          state.paramsList[index].param_varlue = obj.prompt;
          state.promptInitial = obj.prompt;
        }
        if (item.param_name == "negative_prompt") {
          state.paramsList[index].param_varlue = obj.negative_prompt;
        }
        if (
          (item.param_name == "image" || item.param_name == "images") &&
          obj.image
        ) {
          state.paramsList[index].param_varlue = obj.image;
        }
        if (
          (item.param_name == "image" || item.param_name == "images") &&
          !obj.image
        ) {
          state.paramsList[index].param_varlue = "";
        }
      });

      state.normalParams = [];
      state.seniorParams = [];
      state.baseParams = [];
      nextTick(() => {
        state.paramsList.map((v) => {
          if (v.show_type_group == 2) {
            state.seniorParams.push(v);
          } else if (v.show_type_group == 1) {
            state.baseParams.push(v);
          } else {
            state.normalParams.push(v);
          }
        });
      });
    };

    const clearPrompt = () => {
      state.paramsList.map((item, index) => {
        if (item.param_name == "prompt" || item.param_name == "prompts") {
          state.paramsList[index].param_varlue = "";
          state.promptInitial = "";
          getVocabularyList();
        }
      });

      state.normalParams = [];
      state.seniorParams = [];
      state.baseParams = [];
      nextTick(() => {
        state.paramsList.map((v) => {
          if (v.show_type_group == 2) {
            state.seniorParams.push(v);
          } else if (v.show_type_group == 1) {
            state.baseParams.push(v);
          } else {
            state.normalParams.push(v);
          }
        });
      });
    };

    const getPromptList = () => {
      state.loadPrompt = true;
      request
        .get("/work_ai", "/ai/generate/prompt", {
          limit: 4,
          modelId: state.caseInfo.model_id,
        })
        .then((res) => {
          state.promptTitle = res.result;
          state.loadPrompt = false;
        })
        .catch((err) => {
          state.loadPrompt = false;
        });
    };

    const inputChange = (value, type) => {
      if (type == "prompt") {
        state.paramsList.map((item, index) => {
          if (item.param_name == "prompt" || item.param_name == "prompts") {
            state.promptInitial = item.param_varlue;
            if (!state.promptInitial) {
              getVocabularyList();
            }
          }
        });
      }
    };

    const deleteCollect = (item) => {
      utils.modalConfirm({
        title: "提示",
        content:
          state.imageTabIndex == 1
            ? "确定要取消此收藏吗？"
            : "确定要删除此创作吗？",
        onOk: () => {
          if (state.imageTabIndex == 1) {
            request
              .del("/work_ai", "/user/image/case/collect/delete", {
                case_id: item.id,
                id: item.collection.id,
              })
              .then((res) => {
                message.success("删除成功！");
                if (item.id == state.caseInfo.id) {
                  state.caseInfo.collect = 0;
                }
                state.pageInfo.page = 1;
                getMyCollect();
              });
          } else if (state.imageTabIndex == 2) {
            request
              .del("/work_ai", "/user/image/case/delete", {
                id: item.id,
              })
              .then((res) => {
                message.success("删除成功！");
                state.pageInfo.page = 1;
                getMyCreate();
              });
          }
        },
      });
    };

    const collectClick = (item) => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        if (item.collect) {
          request
            .del("/work_ai", "/user/image/case/collect/delete", {
              case_id: item.id,
              id: item.collect_id || item.collection.id,
            })
            .then((res) => {
              message.success("取消收藏成功！");
              item.collect = 0;
              if (item.id == state.caseInfo.id) {
                state.caseInfo.collect = 0;
              }
            });
        } else {
          request
            .post("/work_ai", "/user/image/case/collect/save", {
              case_id: item.id,
            })
            .then((res) => {
              message.success("收藏成功！");
              item.collect_id = res.id;
              item.collect = 1;
              if (item.id == state.caseInfo.id) {
                state.caseInfo.collect = 1;
                state.caseInfo.collect_id = res.id;
              }
            });
        }
      });
    };

    const collectSingleClick = () => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        if (state.caseInfo.collect) {
          request
            .del("/work_ai", "/user/image/case/collect/delete", {
              case_id: state.caseInfo.id,
              id: state.caseInfo.collect_id || state.caseInfo.collection.id,
            })
            .then((res) => {
              message.success("取消收藏成功！");
              state.caseInfo.collect = 0;
              state.modelList.map((v) => {
                if (state.caseInfo.id == v.id) {
                  v.collect = 0;
                }
              });
            });
        } else {
          request
            .post("/work_ai", "/user/image/case/collect/save", {
              case_id: state.caseInfo.id,
            })
            .then((res) => {
              message.success("收藏成功！");
              state.caseInfo.collect_id = res.id;
              state.caseInfo.collect = 1;
              state.modelList.map((v) => {
                if (state.caseInfo.id == v.id) {
                  v.collect = 1;
                  v.collect_id = res.id;
                }
              });
            });
        }

        if (state.imageTabIndex == 1) {
          state.pageInfo.page = 1;
          getMyCollect();
        }
      });
    };

    const downloadThis = (item) => {
      if (item.images.length > 1) {
        state.downloadIng = true;
        let params = {
          caseId: item.id,
          org_id: store.getters.orgId,
        };
        axios
          .get("/api/work_ai/user/image/case/download", {
            params,
            responseType: "blob",
          })
          .then((response) => {
            state.downloadIng = false;
            const blob = new Blob([response.data], {
              type: "application/zip",
            });
            const downloadUrl = URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.href = downloadUrl;
            link.download = item.id + moment(new Date()).format("YYYYMMDD");
            link.click();
          })
          .catch((error) => {
            state.downloadIng = false;
          });
      } else {
        let imgUrl = "";
        if (
          state.outputImages.length > 0 &&
          state.outputImages[state.currentOutIndex]
        ) {
          imgUrl = state.outputImages[state.currentOutIndex];
        } else if (
          state.currentPage == 0 &&
          state.caseInfo.images &&
          state.caseInfo.images[0].origin_uri &&
          state.caseInfo.id
        ) {
          imgUrl = state.caseInfo.images && state.caseInfo.images[0].origin_uri;
        } else if (
          state.currentPage > 0 &&
          state.caseInfo.third_image &&
          state.caseInfo.third_image.length
        ) {
          imgUrl = state.caseInfo.third_image[state.currentPage].url;
        } else {
          imgUrl = state.outputImages[state.currentOutIndex];
        }

        let image = new Image();
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function () {
          let canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          let context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          let url = canvas.toDataURL("image/png");
          let a = document.createElement("a");
          let event = new MouseEvent("click");
          if (item.images[0].origin_uri) {
            a.download = item.images[0].origin_uri.substring(
              item.images[0].origin_uri.lastIndexOf("/") + 1
            );
          } else {
            a.download = item.images[0].substring(
              item.images[0].lastIndexOf("/") + 1
            );
          }
          a.href = url;
          a.dispatchEvent(event);
        };
        image.src = imgUrl;
      }
    };

    const chooseStyle = (index) => {
      // if (state.styleIndex == index) return;
      state.styleIndex = index;
      getImgInfo(state.styleModelList[index].example_img);
      state.caseInfo = {};
      state.downloadIng = false;
      state.outputImages = [];
      state.caseInfo.images = [
        {
          uri: state.styleModelList[index].example_img,
        },
      ];
      state.caseInfo.platform_id = state.styleModelList[index].platform_id;
      state.caseInfo.model_id = state.styleModelList[index].id;
      state.caseInfo.feature_id = state.styleModelList[index].feature_id;
      state.caseInfo.feature = state.styleModelList[index].feature;
      getParamsList(state.styleModelList[index].id);
      getVocabularyList();
    };

    const handleScrollChange = (e) => {
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      if (scrollTop + clientHeight === scrollHeight) {
        if (state.modelList.length > 0) {
          if (state.pageInfo.page >= state.maxPage) {
            state.noMore = true;
          } else {
            state.pageInfo.page += 1;
            if (state.imageTabIndex == 0) {
              getHotModal();
            } else if (state.imageTabIndex == 1) {
              getMyCollect();
            } else if (state.imageTabIndex == 2) {
              getMyCreate();
            }
          }
        }
      }
    };

    const getStyleModel = (isModeTabChange = false) => {
      let params = {};
      if (
        route.query.type &&
        (route.query.type == "image2image" || route.query.type == "text2image")
      ) {
        params = {
          s: 1,
          feature: route.query.type,
          platform_api: state.currentTab,
        };
      } else {
        params = {
          s: 1,
          platform_api: state.currentTab,
        };
      }
      request.get("/work_ai", "/ai/aimodel/list", params).then((res) => {
        state.styleModelList = res.result;
        if (
          (state.caseInfo.model_id == 0 && !isModeTabChange) ||
          (state.caseInfo.model_id && !isModeTabChange)
        ) {
          state.styleIndex = state.styleModelList.findIndex(
            (v) => v.id == state.caseInfo.model_id
          );
        } else {
          chooseStyle(0);
          if (!isModeTabChange) {
            getHotModal();
          }
        }

        state.showDetail = true;
      });
    };
    const modeTabChange = (tab) => {
      state.currentTab = tab;
      if (route.query.type) {
        utils.removeStorage("caseInfo");
        utils.removeStorage("case_tab");
        state.caseInfo = {};
        state.paramsList = [];
        state.normalParams = [];
        state.baseParams = [];
        state.seniorParams = [];
        state.styleModelList = [];
        state.styleIndex = -1;
        state.pageInfo.page = 1;
        state.expandStyle = false;
        if (
          route.query.type == "text2image" ||
          route.query.type == "image2image"
        ) {
          getStyleModel();
        } else {
          getHotModelList().then((res) => {
            res.map((item) => {
              if (item.id == route.query.type) {
                state.caseInfo = {};
                state.downloadIng = false;
                state.outputImages = [];
                state.caseInfo.platform_id = item.platform_id;
                state.caseInfo.model_id = item.id;
                state.caseInfo.feature_id = item.feature_id;
                state.caseInfo.feature = item.feature;
                getParamsList(item.id);
                getVocabularyList();
              }
            });
          });
        }
      }

      if (route.query.id || !route.query.type) {
        getStyleModel(true);
      }
      // getStyleModel(true)
    };
    const makeSame = (item) => {
      state.carouselKey++;
      if (item.third_image && item.images[0] && item.images[0].key != -1) {
        item.third_image.unshift({
          key: -1,
          url: item.images[0]?.origin_uri ?? "",
        });
      }
      state.currentPage = 0;

      state.currentTab = item.platform.api == "midjourney" ? "mj" : "sd";
      getStyleModel();
      utils.setStorage("caseInfo", JSON.stringify(item));
      state.outputImages = [];
      state.currentOutIndex = 0;
      state.downloadIng = false;
      state.caseInfo = item;

      state.caseInfo.collect = state.caseInfo.collection ? 1 : 0;
      getImgInfo(state.caseInfo.images[0].uri);
      if (state.caseInfo.images && state.caseInfo.images.length > 1) {
        state.outputImages = state.caseInfo.images.map((v) => {
          return v.origin_uri;
        });
      }
      state.styleIndex = state.styleModelList.findIndex(
        (v) => v.id == item.model_id
      );
      getParamsList(item.model_id);
      getVocabularyList();
    };

    const batchConsumeCount = () => {
      request
        .get("/work_ai", "/ai/generate/imageNumberFields", {})
        .then((res) => {
          state.mateConsume = res.result;
        });
    };

    const getImgInfo = (src) => {
      let img = new Image();
      img.src = src;
      img.onload = () => {
        if (img.width >= img.height) {
          state.fitWidth = true;
        } else {
          state.fitWidth = false;
        }
      };
    };

    if (
      utils.getStorage("caseInfo") &&
      JSON.parse(utils.getStorage("caseInfo")).id &&
      !route.query.type
    ) {
      state.caseInfo = JSON.parse(utils.getStorage("caseInfo"));

      state.caseInfo.collect = state.caseInfo.collection ? 1 : 0;
      getImgInfo(state.caseInfo.images[0].uri);
      if (state.caseInfo.images && state.caseInfo.images.length > 1) {
        state.outputImages = state.caseInfo.images.map((v) => {
          return v.origin_uri;
        });
      }
      getParamsList(state.caseInfo.model_id);
      getVocabularyList();
      getHotModal();
      getStyleModel();
      batchConsumeCount();
    }

    // 热门风格
    const getHotModelList = () => {
      return new Promise((resolve, reject) => {
        request
          .get("/work_ai", "/ai/aimodel/hot/list", {})
          .then((res) => {
            state.showDetail = true;
            // getHotModal();
            resolve(res.result);
          })
          .catch((err) => {
            reject(err);
          });
      });
    };

    if (route.query.type) {
      state.pageInfo.page = 1;
      state.expandStyle = false;
      state.hideLeft = true;
    }

    if (route.query.type == "text2image" || route.query.type == "image2image") {
      utils.removeStorage("caseInfo");
      utils.removeStorage("case_tab");
      state.caseInfo = {};
      state.paramsList = [];
      state.normalParams = [];
      state.baseParams = [];
      state.seniorParams = [];
      state.styleModelList = [];
      state.styleIndex = -1;
      getStyleModel();
    } else if (route.query.type) {
      getHotModelList().then((res) => {
        res.map((item) => {
          if (item.id == route.query.type) {
            state.caseInfo = {};
            state.downloadIng = false;
            state.outputImages = [];
            state.caseInfo.platform_id = item.platform_id;
            state.caseInfo.model_id = item.id;
            state.caseInfo.feature_id = item.feature_id;
            state.caseInfo.feature = item.feature;
            getParamsList(item.id);
            getVocabularyList();
          }
        });
      });
    } else if (!utils.getStorage("caseInfo")) {
      getStyleModel();
    }

    // 获取消耗次数匹配列表
    batchConsumeCount();

    watch(
      () => route.query.type,
      (val) => {
        if (val) {
          utils.removeStorage("caseInfo");
          utils.removeStorage("case_tab");
          state.caseInfo = {};
          state.paramsList = [];
          state.normalParams = [];
          state.baseParams = [];
          state.seniorParams = [];
          state.styleModelList = [];
          state.styleIndex = -1;
          state.pageInfo.page = 1;
          state.expandStyle = false;
          if (val == "text2image" || val == "image2image") {
            getStyleModel();
          } else {
            getHotModelList().then((res) => {
              res.map((item) => {
                if (item.id == val) {
                  state.caseInfo = {};
                  state.downloadIng = false;
                  state.outputImages = [];
                  state.caseInfo.platform_id = item.platform_id;
                  state.caseInfo.model_id = item.id;
                  state.caseInfo.feature_id = item.feature_id;
                  state.caseInfo.feature = item.feature;
                  getParamsList(item.id);
                  getVocabularyList();
                }
              });
            });
          }
        }
      }
    );

    const consumeCountNum = computed(() => {
      const arr = [
        ...state.normalParams,
        ...state.baseParams,
        ...state.seniorParams,
      ];

      let result = arr.find(
        (v) => state.mateConsume.indexOf(v.param_name) != -1
      );

      if (result) {
        return result.param_varlue;
      }

      return 1;
    });

    const disclaimerClick = () => {
      if (state.disclaimer_url) {
        window.open(state.disclaimer_url, "_blank");
      } else {
        request.get("/work_ai", "/config").then((res) => {
          if (res.list) {
            state.disclaimer_url = res.list.disclaimer_url;
            window.open(state.disclaimer_url, "_blank");
          }
        });
      }
    };
    const imgObj = computed(() => {
      let url = "";
      if (
        state.outputImages.length > 0 &&
        state.outputImages[state.currentOutIndex]
      ) {
        url = state.outputImages[state.currentOutIndex];
      } else if (
        state.currentPage == 0 &&
        state.caseInfo.images &&
        state.caseInfo.images[0].origin_uri &&
        state.caseInfo.id
      ) {
        url = state.caseInfo.images && state.caseInfo.images[0].origin_uri;
      } else if (
        state.currentPage > 0 &&
        state.caseInfo.third_image &&
        state.caseInfo.third_image.length
      ) {
        url =
          state.caseInfo.third_image[state.currentPage] &&
          state.caseInfo.third_image[state.currentPage].url;
      } else {
        url = state.outputImages[state.currentOutIndex];
      }
      return url;
    });
    const getWHStyle = (val) => {
      let obj = {};

      if (val == "1:1") {
        obj = { width: "50%", height: "50%" };
      } else if (val == "3:4") {
        obj = { width: "30%", height: "40%" };
      } else if (val == "4:3") {
        obj = { width: "40%", height: "30%" };
      } else if (val == "9:16") {
        obj = { width: "30%", height: (16 / 3) * 10 + "%" };
      } else if (val == "16:9") {
        obj = { width: (16 / 3) * 10 + "%", height: "30%" };
      }
      return obj;
    };
    const changeScaleMode = (item, tItem) => {
      item.param_varlue = tItem;
    };
    const pageChange = (tIndex) => {
      state.currentPage = tIndex;
      // if(state.caseInfo.third_image&&state.caseInfo.third_image.length>1){

      //   state.currentPage = tIndex
      // }else{

      //   getThirdImgs(state.caseInfo.id,tIndex)
      // }
    };
    let controller = ref(new AbortController());
    let BASE_URL = defaultSetting.requestDomain;
    if (process.env.NODE_ENV === "development") {
      BASE_URL = BASE_URL + "/api";
    }
    const getPrompts = async (item) => {
      if (!item.param_varlue) {
        return;
      }
      state.btnLoading = true;
      const abortSignal = new AbortController();
      controller.value = abortSignal;
      let prompt = "";
      const { responseText } = await streamFetch({
        url: `${BASE_URL}//work_ai/ai/generate/prompt`,

        data: {
          org_id: utils.getOrgId(),
          user_token: utils.getToken(),
          prompt: item.param_varlue,
        },
        onMessage: (text) => {
          console.log(text);
          state.btnLoading = false;
          if (utils.isJSONStr(text)) {
            //这里有错误
            let res = JSON.parse(text);

            if (utils.isObject(res) && res.msg) {
              message.error(res.msg);

              return;
            }
          }

          if (prompt == "" && item.param_varlue != "") {
            item.param_varlue = "";
          }
          prompt += text;
          item.param_varlue = prompt;
        },
        abortSignal,
      }).catch((e) => {
        state.btnLoading = false;
        return {
          responseText: false,
        };
      });

      if (responseText) {
        item.param_varlue = responseText;
      }
    };
    // 获取mj生成后，异步裁剪的四张图片
    const getThirdImgs = (case_id, tIndex) => {
      state.tLoading = true;
      request
        .post("/work_ai", "/user/image/case/crop", {
          case_id,
        })
        .then((res) => {
          state.tLoading = false;
          state.outputImages = [];
          if (state.caseInfo.images[0].origin_uri) {
            let imgs = res?.result ?? [];
            let img = {
              id: state.caseInfo.id,
              url: state.caseInfo.images[0].origin_uri,
            };
            imgs.splice(0, 0, img);

            state.caseInfo.third_image = imgs;
            nextTick(() => {
              state.currentPage = tIndex;
            });
          }
        })
        .catch((err) => {
          state.tLoading = false;
          message.error(err.msg);
        });
    };
    if (utils.getStorage("case_tab")) {
      state.imageTabIndex = 2;
      getMyCreate();
    }

    //调用接口放大图片
    const biggerImage = (index) => {
      state.currentBiggerImgIndex = index;
      let currentImg = state.caseInfo.third_image[index];
      // 如果已经生成过大图了，无需请求接口
      if (currentImg.up_url) {
        state.imgVisible = true;
        return;
      }
      let params = {
        case_id: state.caseInfo.id,
        action_key: currentImg?.key ?? "",
      };
      let teamId = store.state.user.teamId;
      if (teamId) {
        params.team_id = teamId;
      }
      state.tLoading = true;
      request
        .post("/work_ai", "/user/image/case/upsample", params)
        .then((res) => {
          if (res.result.status == "error") {
            message.error(res.result.message);
            state.tLoading = false;
            return;
          }
          let params = {};
          params.resource_id = res.result.resource_id;
          params.action_key = currentImg?.key ?? "";
          utils.modalConfirm({
            title: "提示",
            content: "图片生成中...",
            cancelText: "关闭",
            okText: "确定等待",
            onOk: () => {
              biggerImageInterver(params, index);
            },
            onCancel: () => {
              state.tLoading = false;
            },
          });
        })
        .catch((err) => {
          state.tLoading = false;
        });
    };
    // 图片放大轮询
    const biggerImageInterver = (params) => {
      request
        .get("/work_ai", "/user/case/upsample/result", params)
        .then((res) => {
          if (res.result.status != true) {
            let obj = {};
            Object.assign(obj, params);

            let timeout = setTimeout(() => {
              biggerImageInterver(obj);
              clearTimeout(timeout);
            }, 1500);
          }
          if (res.result.status == true) {
            if (state.caseInfo.id) {
              getCaseInfo(state.caseInfo.id, true);
            }
            state.tLoading = false;

            message.success("生成完成！");
          }

          if (res.result.status == "failed" || res.result.status == "error") {
            message.error(res.result.error);
            state.tLoading = false;
          }
        })
        .catch((err) => {});
    };
    const currentBiggerImgUrl = computed(() => {
      return state.caseInfo.third_image
        ? state.caseInfo.third_image[state.currentBiggerImgIndex]?.up_url ?? ""
        : "";
    });

    const adjustImage = (index) => {
      let currentImg = state.caseInfo.third_image[index];
      let params = {
        case_id: state.caseInfo.id,
        action_key: currentImg?.key ?? "",
      };
      let teamId = store.state.user.teamId;
      if (teamId) {
        params.team_id = teamId;
      }
      state.tLoading = true;
      state.isGenerate = true;
      state.imageLoading = true;
      request
        .post("/work_ai", "/user/image/case/variation", params)
        .then((res) => {
          if (res.result.status == "error") {
            message.error(res.result.message);
            state.isGenerate = false;
            state.imageLoading = false;
            state.tLoading = false;
            return;
          }

          let params = {};
          params.replicateId = res.result.id;
          params.modelId = state.caseInfo.model_id;
          params.featureId = state.caseInfo.feature_id;
          params.platformId = state.caseInfo.platform_id;
          state.caseId = res.result.caseId;
          state.caseInfo.id = res.result.caseId;

          state.modalConfirmOKCallback = () => {
            state.modalConfirmVisible = false
            getResult(params)
          }

          state.modalConfirmCancelCallback = () => {
            state.modalConfirmVisible = false

            state.isGenerate = false;
            state.imageLoading = false;
            state.tLoading = false;
            tabChange(2);
          }
          
          state.modalConfirmVisible = true
        });
    };

    // 判断作品是生成中还是生成错误
    const judgeStatus = (status) => {
      let text = "图片生成中...";
      if (status == "starting" || status == "processing" || status == "queue") {
        text = "图片生成中..."; //生成中
      } else if (
        status == "failed" ||
        status == "canceled" ||
        status == "error"
      ) {
        text = "图片生成失败"; //生成失败
      } else {
        text = ""; //成功
      }
      return text;
    };
    const selectNiji = (item, val) => {
      item.param_varlue = val;
    };
    return {
      ...toRefs(state),
      searchThis,
      tabChange,
      handleUploadChange,
      beforeUpload,
      generateImage,
      tagTabChange,
      chooseTagsItems,
      inputChange,
      makeSame,
      deleteCollect,
      handleScrollChange,
      downloadThis,
      chooseStyle,
      consumeCountNum,
      loginCallback,
      getPromptList,
      chooseRecommad,
      clearPrompt,
      collectClick,
      collectSingleClick,
      middleTopStyle,
      disclaimerClick,
      middleConStyle,
      rightConStyle,
      imgObj,
      modeTabChange,
      getWHStyle,
      changeScaleMode,
      pageChange,
      getPrompts,
      onChange,
      biggerImage,
      currentBiggerImgUrl,
      adjustImage,
      judgeStatus,
      selectNiji,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-upload.ant-upload-drag .ant-upload) {
  padding: 0;
}

@marginTop: 15px; // 定义模块之间的间距

.detail_page {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .left_con {
    width: 20%;
    height: 100%;
    background: #ffffff;
    padding: 20px;
    flex-shrink: 0;
    transform: translateX(1px);
    .top_title {
      font-size: 14px;
      color: #333333;

      .breadcrumb {
        .point {
          cursor: pointer;
        }
      }
    }

    .search_con {
      margin-top: @marginTop;
    }

    .tab_con {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: @marginTop;

      .tab_item {
        font-family: PingFang SC;
        color: #6c737b;
        font-size: 14px;
        cursor: pointer;

        &.active {
          font-weight: bold;
          color: #333333;
        }
      }
    }

    .tab_main {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: space-between;
      width: 100%;
      height: calc(100% - 106px);
      overflow-y: scroll;
      margin-top: 5px;

      .no_data {
        width: 100%;
        display: flex;
        margin-top: 100px;
        align-items: center;
        justify-content: center;
        color: #999999;
      }

      .model_loading {
        width: 100%;
        display: flex;
        margin-top: 100px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #999999;
      }

      &::-webkit-scrollbar {
        width: 0;
      }

      .image_item {
        border: 1px solid #dddddd;
        width: 48%;
        height: 240px;
        border-radius: 5px;
        margin-top: 10px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;

        &:hover {
          .operate_image {
            display: block;
            cursor: pointer;
          }
        }

        &:hover {
          .operate_image-cover {
            position: absolute;
            top: 0;
            left: 0;

            display: block;
            cursor: pointer;
          }
        }

        .operate_image-cover {
          width: 100%;
          height: 100%;
          display: none;
          background-color: rgba(0, 0, 0, 0.3);
          border-radius: 5px;
          .delete_collect {
            position: absolute;
            bottom: 10px;
            left: 5%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px;
            color: #fff;
            border-radius: 50px;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.1);
          }
        }

        .operate_image {
          width: 100%;
          height: 100%;
          display: none;
          background-color: rgba(0, 0, 0, 0.3);
          border-radius: 5px;
          position: relative;

          .image_title {
            position: absolute;
            left: 5px;
            top: 5px;
            font-size: 14px;
            color: #ffffff;
            display: inline-block;
            width: 95%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .make_same {
            position: absolute;
            bottom: 10px;
            right: 5%;
            border: 0;
            background-image: linear-gradient(
              to bottom right,
              #938bff,
              #daaefe
            );
            overflow: hidden;

            @keyframes light {
              0% {
                left: -5px;
              }

              25% {
                left: -5px;
              }

              50% {
                left: 57px;
              }

              75% {
                left: 57px;
              }

              100% {
                left: 57px;
              }
            }

            &:hover {
              &:after {
                content: "";
                height: 25px;
                width: 15px;
                display: inline-block;
                top: 0px;
                background: hsla(0, 0%, 100%, 0.3);
                position: absolute;
                left: -60px;
                z-index: 2;
                -webkit-transform: skew(-12deg);
                transform: skew(-12deg);
                -webkit-animation: light 1.5s linear;
                animation: light 1.5s linear;
              }
            }
          }

          .my_collect {
            position: absolute;
            bottom: 10px;
            left: 5%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px;
            color: #fff;
            border-radius: 50px;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.1);
          }

          .delete_collect {
            position: absolute;
            bottom: 10px;
            left: 5%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px;
            color: #fff;
            border-radius: 50px;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.1);
          }

          .download_this {
            position: absolute;
            bottom: 46px;
            left: 5%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px;
            color: #fff;
            border-radius: 50px;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.1);
          }
        }
      }
    }
  }

  .middle_con {
    width: 60%;
    padding: 0px 20px;
    height: 100%;

    .loading_txt {
      width: 120px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 5px;
      position: relative;
      overflow: hidden;

      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      &::before {
        content: "";
        width: 200%;
        height: 200%;
        position: absolute;
        background-color: #938bff;
        z-index: -2;
        left: 50%;
        top: 50%;
        transform-origin: 0 0;
        animation: rotate 2s infinite linear;
        z-index: 1;
      }

      &::after {
        content: "";
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        background: rgb(255, 255, 255);
        border-radius: 5px;
        position: absolute;
        left: 2px;
        top: 2px;
        z-index: 1;
      }
    }

    .middle_top {
      width: 100%;
      height: calc(100% - 60px);
      display: flex;
      align-items: center;
      justify-content: center;

      .main_image {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 20px;
        overflow: hidden;
        .right_operate {
          width: 30px;
          height: 60px;
          background-color: #fff;
          .download_image {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .collect_image {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
        }

        .image_container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;

          img {
            width: 200px;
            height: 200px;
            object-fit: cover;
          }

          .title {
            color: #333;
            font-size: 16px;
            font-weight: 600;
          }

          .desc {
            color: #999;
            margin-top: 10px;
          }
        }
      }
    }

    .middle_bottom {
      width: 100%;
      height: 60px;
      padding: 10px;
      background-color: #ffffff;
      border-radius: 10px;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      overflow-x: scroll;
      overflow-y: hidden;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .image_item {
        width: 50px;
        height: 50px;
        border-radius: 5px;
        margin-left: 3px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        cursor: pointer;

        .choose_image {
          width: 100%;
          height: 100%;
          overflow: hidden;
          background-color: rgba(0, 0, 0, 0.3);
          color: #fff;
          display: flex;
          align-items: flex-end;
          justify-content: flex-start;
          border-radius: 5px;
        }
      }

      .save_btn {
        padding: 10px 27px;
        border: 0;
        background: linear-gradient(90deg, #938bff, #ff97f2);
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        cursor: pointer;
      }
    }
  }

  .right_con {
    width: 20%;
    height: 100%;

    .loading_view {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #666;
      font-size: 15px;
    }

    .right_top {
      height: calc(100% - 80px);
      overflow-y: scroll;

      &::-webkit-scrollbar {
        width: 0;
      }

      .normal_params_con {
        background-color: #fff;
        padding: 20px;
        border-radius: 0 0 10px 10px;
        // margin-top: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
      }

      .base_params_con {
        background-color: #fff;
        padding: 20px;
        margin-bottom: 10px;
        margin-right: 10px;
        border-radius: 10px;
        .form_item {
          .form_title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;

            .left_title {
              font-size: 14px;
              font-weight: 500;
              color: #333333;
            }

            .right_con {
              font-size: 12px;
            }
          }
        }
      }

      .senior_params_con {
        background-color: #fff;
        padding: 20px;
        margin-bottom: 10px;
        margin-right: 10px;
        border-radius: 10px;
        .form_item {
          .form_title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;

            .left_title {
              font-size: 14px;
              font-weight: 500;
              color: #333333;
            }

            .right_con {
              font-size: 12px;
            }
          }
        }
      }

      .senior_title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left_title {
          font-size: 14px;
          font-weight: bold;
          color: #333333;
        }

        .right_con {
          font-size: 12px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
      }

      .base_title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left_title {
          font-size: 14px;
          font-weight: bold;
          color: #333333;
        }

        .right_con {
          font-size: 12px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
      }

      .form_item {
        .form_title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 10px;

          .left_title {
            font-size: 14px;
            font-weight: bold;
            color: #333333;
          }

          .right_con {
            font-size: 12px;
          }
        }

        .form_value {
          margin-top: 5px;
          .upload_con {
            width: 100%;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 5px;
            cursor: pointer;

            .upload_txt {
              display: flex;
              flex-direction: column;
              align-items: flex-start;

              .text_1 {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
              }

              .text_2 {
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999999;
                margin-top: 5px;
              }
            }

            .upload_image {
              width: 60px;
              height: 60px;
              border-radius: 5px;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              border: 1px #dddddd dashed;
            }
          }

          .text_area_con {
            width: 100%;
            background-color: #f6f7f9;
            border-radius: 10px;
            padding: 20rpx;

            :deep(.ant-input:focus) {
              border: none;
              box-shadow: none;
            }

            :deep(.ant-input) {
              &::-webkit-scrollbar {
                width: 3px;
              }

              &::-webkit-scrollbar-thumb {
                /* 滚动条样式 */
                -webkit-box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.3);
                box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.3);
                border-radius: 2.5px;
                background-color: #d9dcdf;
                opacity: 0.7;
                transition: opacity ease-in-out 200ms;
              }
            }

            .textarea_bottom {
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              border-top: 1px solid #e3e4e5;
              padding: 10px;
            }
          }

          .bottom_tips {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 3px;
            padding: 10px 0px;

            .refrash_icon {
              color: #999;

              &:hover {
                color: #333;
                font-weight: bold;
              }
            }

            .prompt_title {
              width: 240px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              display: inline-block;
              color: #666666;

              .a_link {
                color: #999;
                margin-left: 5px;
                font-size: 12px;

                &:hover {
                  color: #333;
                  font-weight: bold;
                }
              }
            }

            .prompt_loading {
              animation: change linear 1s infinite;
            }

            @keyframes change {
              from {
                transform: rotate(0deg);
              }

              to {
                transform: rotate(720deg);
              }
            }
          }
        }

        .line {
          width: 100%;
          height: 1px;
          border: 0;
          background-color: #dddddd;
          margin: 25px 0;
        }
      }
    }

    .bottom_btn {
      padding: 20px;
      width: calc(100% - 10px);
      border-top: 1px solid #dddddd;
      background-color: #fff;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex-direction: column;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      .create_btn {
        padding: 6px 27px;
        background: linear-gradient(90deg, #938bff, #ff97f2);
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        cursor: pointer;
      }

      .consume_tips {
        width: 100%;
        color: #938bff;
      }

      .disclaimer-wrap {
        position: absolute;
        top: 8px;
        right: 20px;
        color: #999;
        font-size: 12px;
        cursor: pointer;

        &:hover {
          color: @primary-color;
        }
      }
    }
  }
}

.keywords_con {
  width: 100%;
  height: 600px;
  background: #ffffff;
  flex-direction: column;
  overflow-y: scroll;
  padding: 0px 10px 20px 10px;

  &::-webkit-scrollbar {
    width: 0;
  }

  .form_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;

    .left_title {
      font-size: 14px;
      font-weight: bold;
      color: #333333;
    }

    .right_con {
      font-size: 12px;
    }
  }

  .tab_list {
    display: flex;
    flex-wrap: wrap;
    transform: translateX(-5px);

    .line_height {
      height: 20px;
      width: 100%;
    }

    .sub_container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .sub_item {
        margin-top: 10px;

        .label_title {
          display: flex;
          align-items: center;
          cursor: pointer;
          margin-left: 5px;
        }

        .tags_con {
          margin-top: 10px;
          display: flex;
          flex-wrap: wrap;

          .tab_item {
            border-radius: 3px;
            padding: 0px 10px;
            margin: 2px 5px;
            background-color: #fafafa;
            border: 1px solid #999999;
            color: #999999;
            cursor: pointer;

            &.active {
              background-color: rgba(147, 139, 255, 0.2);
              border: 1px solid rgba(147, 139, 255, 1);
              color: rgba(147, 139, 255, 1);
            }
          }
        }
      }
    }

    .tab_item {
      border-radius: 3px;
      padding: 0px 10px;
      margin: 2px 5px;
      background-color: #fafafa;
      border: 1px solid #999999;
      color: #999999;
      cursor: pointer;

      &.active {
        background-color: rgba(147, 139, 255, 0.2);
        border: 1px solid rgba(147, 139, 255, 1);
        color: rgba(147, 139, 255, 1);
      }
    }
  }
}
.image_item_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top right, #a871ec, #dc7be0);

  border-radius: 5px;
  color: #fff;
}
.page-wrapper {
  display: flex;
  height: 60px;
  align-items: center;
  width: 100%;
  justify-content: center;
  .page-list {
    display: flex;
    width: 60%;
    justify-content: space-around;
    .page-item {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 45px;
      border-radius: 5px;
      width: 100px;
      border: 1px solid #e7e2e2;
      cursor: pointer;
    }
    .active-page {
      background-color: #a871ec;
      color: #fff;

      border: 1px solid #a871ec;
    }
  }
}
.h-30 {
  height: 30px !important;
}
.tab-list {
  display: flex;
  margin-top: 10px;
  margin-right: 10px;
  border-radius: 10px 10px 0 0;
}
.tab-sd,
.tab-mj {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 45px;
  background-color: #f6f7f9;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  font-size: 18px;
  color: #aaa;
}
.tab-sd {
  // background: linear-gradient(85deg, #FF9078 7.57%, #FA3440 80.06%);
  -webkit-mask: linear-gradient(red, red),
    url("data:image/svg+xml,%3Csvg width='16' height='40' viewBox='0 0 16 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0h-2.344a1 1 0 0 1 .957 1.287L3.855 37.148A4 4 0 0 1 .023 40H16V0z' fill='%23C6F'/%3E%3C/svg%3E")
      right/auto 100% no-repeat;
  -webkit-mask-composite: xor;
}
.tab-mj {
  // background: linear-gradient(274deg, #5FB6F5 -3.81%, #4B80EE 62.98%);
  -webkit-mask: linear-gradient(red, red),
    url("data:image/svg+xml,%3Csvg width='16' height='40' viewBox='0 0 16 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 40h2.344a1 1 0 0 1-.957-1.287L12.145 2.85A4 4 0 0 1 15.977 0H0v40z' fill='%23C6F'/%3E%3C/svg%3E")
      left/auto 100% no-repeat;
  -webkit-mask-composite: xor;
}
.active-tab {
  background-color: #fff;
  color: #a871ec;
}
.scale-list {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.scale-mode {
}
.scale-item {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid #ced3dc;
  border-radius: 5px;
  color: #aaa;
  box-sizing: border-box;
  padding: 5px;
  cursor: pointer;
}
.bg-purple {
  background-color: #b68ffb;
}
.bg-grey {
  background-color: #aaa;
}
.br-purple {
  border: 1px solid #b68ffb;
}
.carousel-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-objectFit {
  object-fit: contain;
}

.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  // width: 25px;
  // height: 25px;
  font-size: 25px;
  color: #000;
  // background-color: #000;

  right: -50px !important;
  opacity: 0.3;
}
.ant-carousel :deep(.slick-prev) {
  left: -50px !important;
}
.ant-carousel :deep(.slick-slider) {
  height: 100%;
}
.ant-carousel :deep(.slick-list) {
  height: 100%;
}

.ant-carousel :deep(.slick-track) {
  height: 100%;
}
.ant-carousel :deep(.slick-slide div) {
  height: 100%;
}
.ant-carousel :deep(.slick-slide img) {
  height: 100% !important;
}
.ant-carousel :deep(.custom-slick-arrow:before) {
  display: none;
}
.operation {
  height: 60px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.magnify,
.trimming {
  display: flex;
  width: 60%;
  align-items: center;
  justify-content: space-around;
  height: 25px;
}
.color-purple {
  color: #b68ffb;
}
.img-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
.img-center {
  height: 100%;
  object-fit: contain;
}
.mask-close {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #fff;
  font-size: 30px;
}
.style-list-niji {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px; /* 列之间的间隔 */
}
.style-item {
  height: 84px;
  position: relative;

  border-radius: 6px;
  cursor: pointer;
}
.move-box {
  // z-index: 9;
  width: 7px;
  height: 7px;
  border-radius: 50px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: -5px;
  left: -5px;

  background-color: #fff;
  box-shadow: 0 0 10px 5px #fff;
  animation: move-box 2s linear infinite;
}

// move-box动画
@keyframes move-box {
  25% {
    left: 100%;
    top: -5px;
  }

  50% {
    left: 100%;
    top: 84px;
    right: -2px;
  }

  75% {
    left: 0;
    top: 80px;
  }
}
.example_img {
  border-radius: 10rpx;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.item-bottom-niji {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  color: #fff;
}
.active-style {
  border: 2px solid #ad72eb;
  border-radius: 8px;
}
</style>
